<template>
    <div id="championship">
        <div class="title-wrap">
            <div class="title-text">
            </div>
            <div class="title-btns">
                <img src="../../assets/img/mini-w.png" @click="$electron.ipcRenderer.send('resource-window-minimize',{metaId:id})" alt="" />
                <img src="../../assets/img/close-w.png" @click="$electron.ipcRenderer.send('close-resource-window',{metaId:id})" alt="" />
            </div>
        </div>
        <div class="championContent">
            <div class="top-progress flex-center" :class=" peopleNum == '3' ?'threeMode':'' ">
                <div class="flex-center" :class="peopleNum == '3'? 'three_Title':'' ">
                    <time-out-progress key="blue"  v-if="peopleNum != '3'" annulusColor="#57B93C" ref="blueTimeOut" @brforeRestart="brforeBlueRestart" @nextStep="buleNextStep"></time-out-progress>
                    <div class="flex-center" style="margin-left:10px" >
                        <div>
                            <!-- {{ winner==='blue'?'已完成':`第${ firstCurrentQuestion+1 }题`}} -->
                            <div class="question-index">{{ winner==='blue' ? '已完成' : `(${firstCurrentQuestion +1} / ${secondQuestionArry.length})`}}</div>
                        </div>
                        <div class="progress progress-l flex-end" >
                            <img src="../../assets/img/blue.png" alt="" :style="`width:${(firstCurrentQuestion+1)*widthtPre}%`" class="progress-img">
                        </div>
                    </div>
                    <time-out-progress  v-if="peopleNum == '3'" key="blue" annulusColor="#57B93C" ref="blueTimeOut" @brforeRestart="brforeBlueRestart" @nextStep="buleNextStep"></time-out-progress>
                </div>
                <img src="../../assets/img/pk.png" alt="" class="pk" v-if="peopleNum != '3'">
                <div class="flex-center" :class="peopleNum == '3'? 'three_Title':'' ">
                    <div class="flex-center" style="margin-right:10px" >
                        <div class="progress progress-r flex-start">
                            <img src="../../assets/img/red.png" alt="" :style="`width:${(secondCurrentQuestion+1)*widthtPre}%`" class="progress-img">
                        </div>
                        <div>
                            <!-- {{winner==='red'?'已完成':`第${ secondCurrentQuestion+1 }题`}} -->
                            <div class="question-index">{{ winner==='blue' ? '已完成' : `(${firstCurrentQuestion +1} / ${secondQuestionArry.length})`}}</div>
                        </div>
                    </div>
                    <time-out-progress key="red" annulusColor="#FF9227" ref="redTimeOut" @brforeRestart="brforeRedRestart" @nextStep="redNextStep"></time-out-progress>
                </div>
                <div class="flex-center" :class="peopleNum == '3'? 'three_Title':'' ">
                    <div class="flex-center" style="margin-right:10px" v-if="peopleNum == '3' " >
                        <div class="progress progress-r flex-start">
                            <img src="../../assets/img/red.png" alt="" :style="`width:${(thirdCurrentQuestion+1)*widthtPre}%`" class="progress-img">
                        </div>
                        <div>
                            <!-- {{winner==='red'?'已完成':`第${ secondCurrentQuestion+1 }题`}} -->
                            <div class="question-index">{{ winner==='blue' ? '已完成' : `(${firstCurrentQuestion +1} / ${secondQuestionArry.length})`}}</div>
                        </div>
                    </div>
                    <time-out-progress v-if="peopleNum == '3'" key="yellow" annulusColor="#0085ff" ref="yellowTimeOut" @brforeRestart="brforeYellowRestart" @nextStep="yellowNextStep"></time-out-progress>
                </div>
            </div>
            <div style="margin-top:3vh">
                <div class="championship-content flex-center" :class="peopleNum == '3' ?'threeMode_content':'' ">
                    <div class="blue-content align-between">
                        <div class="topic-container align-center">
                            <div class="topic" style="padding-right:3.3vw;">
                                {{firstQuestionArry[firstCurrentQuestion].topic}}
                            </div>
                            <div class="answer-options" style="padding-right:3.3vw;">
                                <!-- 选择题 -->
                                <div v-if="firstQuestion.quiz_type===0" style="width:100%">
                                    <div v-if="firstQuestion.answerType==='IMG'" class="flex-center">
                                        <v-touch class="img-answer" v-for="(item,index) in firstQuestion.answerOptions" :key="item" v-on:tap="changeAnswer('firstQuestion',index)">
                                            <img :src="item" alt="">
                                            <div class="current-answer flex-center" v-if="firstAnswer[firstCurrentQuestion] === index">
                                                <img src="../../assets/img/current-answer.png" alt="">
                                            </div>
                                            <div class="answerText">{{firstQuestion.options[index]}}</div>
                                        </v-touch>
                                    </div>
                                    <div v-else class="text-container " ref="answer">
                                        <v-touch ref="wordSpaceBlue" :class="['text-answer',{'answer-active':firstAnswer[firstCurrentQuestion]===index}]"
                                            v-for="(item, index) in firstQuestion.answerOptions" :key="index" v-on:tap="changeAnswer('firstQuestion',index)">
                                            <div class="text-content flex-start pointer" :ref="`textContent${index}`" >
                                                <div class="pointer" style="display:flex;"><span>{{options[index]}}.&nbsp;&nbsp;</span><span>{{item}}</span></div>
                                            </div>
                                        </v-touch>
                                    </div>
                                </div>
                                <!-- 判断题 -->
                                <div v-if="firstQuestion.quiz_type===1" class="flex-center" style="width:100%">
                                    <v-touch :class="['judge','flex-center',{'judge-active':firstAnswer[firstCurrentQuestion]===0}]" v-on:tap="changeAnswer('firstQuestion',0)">
                                        <img src="../../assets/img/active-right.png" alt="" v-if="firstAnswer[firstCurrentQuestion]===0">
                                        <img src="../../assets/img/right.png" alt="" v-else>
                                    </v-touch>
                                    <v-touch :class="['judge','flex-center',{'judge-active':firstAnswer[firstCurrentQuestion]===1}]" v-on:tap="changeAnswer('firstQuestion',1)">
                                        <img src="../../assets/img/active-error.png" alt="" v-if="firstAnswer[firstCurrentQuestion]===1">
                                        <img src="../../assets/img/error.png" alt="" v-else>
                                    </v-touch>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="width: 2px;height: 68vh;background-color:#8ABBF7;margin-top: 5vh;"></div>
                    <div class="red-content  align-between">
                        <!-- <div class="question-title question-title-r flex-center">
                            {{secondQuestion.name}}
                        </div> -->
                        <div class="topic-container align-center">
                            <div class="topic" style="padding-left:3.3vw;">
                                {{secondQuestionArry[secondCurrentQuestion].topic}}
                            </div>
                            <div class="answer-options" style="padding-left:3.3vw;">
                                <!-- 选择题 -->
                                <div v-if="secondQuestion.quiz_type===0" style="width:100%">
                                    <div v-if="secondQuestion.answerType==='IMG'" class="flex-center">
                                        <v-touch class="img-answer" v-for="(item,index) in secondQuestion.answerOptions" :key="item" v-on:tap="changeAnswer('secondQuestion',index)">
                                            <img :src="item" alt="">
                                            <div class="current-answer flex-center" v-if="secondAnswer[secondCurrentQuestion]===index">
                                                <img src="../../assets/img/current-answer.png" alt="">
                                            </div>
                                            <div class="answerText">{{secondQuestion.options[index]}}</div>
                                        </v-touch>
                                    </div>
                                    <div v-else class="text-container " ref="answer">
                                        <v-touch ref="wordSpaceRed" :class="['text-answer',{'answer-active':secondAnswer[secondCurrentQuestion]===index}]"
                                            v-for="(item, index) in secondQuestion.answerOptions" :key="index" v-on:tap="changeAnswer('secondQuestion',index)">
                                            <div class="text-content flex-start pointer" :ref="`textContent${index}`" >
                                                <div class="pointer" style="display:flex;"><span>{{options[index]}}.&nbsp;&nbsp;</span><span>{{item}}</span></div>
                                            </div>
                                        </v-touch>
                                    </div>
                                </div>
                                <!-- 判断题 -->
                                <div v-if="secondQuestion.quiz_type===1" class="flex-center" style="width:100%">
                                    <v-touch :class="['judge','flex-center',{'judge-active':secondAnswer[secondCurrentQuestion]===0}]" v-on:tap="changeAnswer('secondQuestion',0)">
                                        <img src="../../assets/img/active-right.png" alt="" v-if="secondAnswer[secondCurrentQuestion]===0">
                                        <img src="../../assets/img/right.png" alt="" v-else>
                                    </v-touch>
                                    <v-touch :class="['judge','flex-center',{'judge-active':secondAnswer[secondCurrentQuestion]===1}]" v-on:tap="changeAnswer('secondQuestion',1)">
                                        <img src="../../assets/img/active-error.png" alt="" v-if="secondAnswer[secondCurrentQuestion]===1">
                                        <img src="../../assets/img/error.png" alt="" v-else>
                                    </v-touch>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-if="peopleNum == '3'" style="width: 2px;height: 68vh;background-color:#8ABBF7;margin-top: 5vh;margin-left: 3.3vw;"></div>
                    <div v-if="peopleNum == '3'" class="yellow-content  align-between">
                        <div class="topic-container align-center">
                            <div class="topic" style="padding-left:3.3vw;">
                                {{thirdQuestionArry[thirdCurrentQuestion].topic}}
                            </div>
                            <div class="answer-options" style="padding-left:3.3vw;">
                            <!-- 选择题 -->
                                <div v-if="thirdQuestion.quiz_type===0" style="width:100%">
                                    <div v-if="thirdQuestion.answerType==='IMG'" class="flex-center">
                                        <v-touch class="img-answer" v-for="(item,index) in thirdQuestion.answerOptions" :key="item" v-on:tap="changeAnswer('thirdQuestion',index)">
                                            <img :src="item" alt="">
                                            <div class="current-answer flex-center" v-if="thirdAnswer[thirdCurrentQuestion]===index">
                                                <img src="../../assets/img/current-answer.png" alt="">
                                            </div>
                                            <div class="answerText">{{thirdQuestion.options[index]}}</div>
                                        </v-touch>
                                    </div>
                                    <div v-else class="text-container " ref="answer">
                                        <v-touch ref="wordSpaceYellow" :class="['text-answer',{'answer-active':thirdAnswer[thirdCurrentQuestion]===index}]"
                                            v-for="(item, index) in thirdQuestion.answerOptions" :key="index" v-on:tap="changeAnswer('thirdQuestion',index)">
                                            <div class="text-content flex-start pointer" :ref="`textContent${index}`" >
                                                <div class="pointer" style="display:flex;"><span>{{options[index]}}.&nbsp;&nbsp;</span><span>{{item}}</span></div>
                                            </div>
                                        </v-touch>
                                    </div>
                                </div>
                                <!-- 判断题 -->
                                <div v-if="thirdQuestion.quiz_type===1" class="flex-center">
                                    <v-touch :class="['judge','flex-center',{'judge-active':thirdAnswer[thirdCurrentQuestion]===0}]" v-on:tap="changeAnswer('thirdQuestion',0)">
                                        <img src="../../assets/img/active-right.png" alt="" v-if="thirdAnswer[thirdCurrentQuestion]===0">
                                        <img src="../../assets/img/right.png" alt="" v-else>
                                    </v-touch>
                                    <v-touch :class="['judge','flex-center',{'judge-active':thirdAnswer[thirdCurrentQuestion]===1}]" v-on:tap="changeAnswer('thirdQuestion',1)">
                                        <img src="../../assets/img/active-error.png" alt="" v-if="thirdAnswer[thirdCurrentQuestion]===1">
                                        <img src="../../assets/img/error.png" alt="" v-else>
                                    </v-touch>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="student-handle flex-center">
                    <div class="handle-container flex-center">
                        <div class="handle flex-center">
                            <!-- <div class="center pointer" @click="changeCurrentQuestion('blue',-1)">
                                <i class="el-icon-caret-left"></i>
                                <span>上一题</span>
                            </div> -->
                            <v-touch tag="a" v-on:tap="submit('blue')" class="submit pointer flex-center" >
                                提交
                            </v-touch>
                            <!-- <div class="center pointer" @click="changeCurrentQuestion('blue',1)">
                                <span>下一题</span>
                                <i class="el-icon-caret-right"></i>
                            </div> -->
                        </div>
                    </div>
                    <div class="handle-container flex-center">
                        <div class="handle flex-center">
                            <!-- <div class="center pointer" @click="changeCurrentQuestion('red',-1)">
                                <i class="el-icon-caret-left"></i>
                                <span>上一题</span>
                            </div> -->
                            <v-touch tag="a" v-on:tap="submit('red')" class="submit pointer flex-center" >
                                提交
                            </v-touch>
                            <!-- <div class="center pointer" @click="changeCurrentQuestion('red',1)">
                                <span>下一题</span>
                                <i class="el-icon-caret-right"></i>
                            </div> -->
                        </div>
                    </div>
                    <div class="handle-container flex-center" v-if="peopleNum == '3'" >
                        <div class="handle flex-center">
                            <v-touch tag="a" v-on:tap="submit('yellow')" class="submit pointer flex-center" >
                                提交
                            </v-touch>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tips-container" v-if="peopleNum !== '3'">
                <div class="error-tips align-center" style="left:0" :class="[ peopleNum == '3' ? 'three_errorTips':'']" v-if="blueSubmited">
                    <!-- <img src="../../assets/img/right-img.png" v-if="firstAnswer[firstCurrentQuestion]===firstQuestion.answer" alt=""> -->
                    <img src="../../assets/img/error-img.png" alt="">
                    <v-touch>
                        <el-button style="width:100px;margin-top:20px" type="primary" :disabled="errorBlueTips!=='关闭'" @click="next('blue',false)">{{errorBlueTips}}</el-button>
                    </v-touch>
                </div>
                <div class="error-tips align-center" style="right:0" :style="peopleNum == '3' ? 'right:33.34vw':''" :class="[ peopleNum == '3' ? 'three_errorTips':'']" v-if="redSubmited">
                    <!-- <img src="../../assets/img/right-img.png" v-if="secondAnswer[secondCurrentQuestion]===secondQuestion.answer" alt=""> -->
                    <img src="../../assets/img/error-img.png" alt="">
                    <v-touch>
                        <el-button style="width:100px;margin-top:20px" class="submit pointer flex-center" type="primary" :disabled="errorRedTips!=='关闭'" @click="next('red',false)">{{errorRedTips}}
                        </el-button>
                    </v-touch>
                </div>
                <div class="error-tips align-center" style="right:0" :class="[ peopleNum == '3' ? 'three_errorTips':'']" v-if="yellowSubmited && peopleNum == '3'">
                    <!-- <img src="../../assets/img/right-img.png" v-if="secondAnswer[secondCurrentQuestion]===secondQuestion.answer" alt=""> -->
                    <img src="../../assets/img/error-img.png" alt="">
                    <v-touch>
                        <el-button style="width:100px;margin-top:20px" class="submit pointer flex-center" type="primary" :disabled="errorYellowTips!=='关闭'" @click="next('yellow',false)">{{errorYellowTips}}
                        </el-button>
                    </v-touch>
                </div>

                <div style="left:0" class="failed-res align-center"   v-if="(shoWinner.winner&&shoWinner.winner==='blue')||(shoWinner.loser==='blue' )">
                     <img  src="../../assets/img/winner.png"  v-if="winner==='blue' " alt="">
                     <img  src="../../assets/img/failure.png" v-if="loser=='blue' " alt="">
                     <div  class="score" style="color:#FFFFFF;">{{firstScore}}分</div>
                </div>
                <div class="close-winner pointer" style="-webkit-app-region: no-drag;" @click="resetWinner" v-if="loser">
                    <i class="el-icon-close"></i>
                </div>
                <div style="right:0" class="failed-res align-center"  v-if="(shoWinner.winner&&shoWinner.winner==='red')||shoWinner.loser==='red'  ">
                    <img src="../../assets/img/winner.png" v-if="winner==='red' " alt="">
                    <img src="../../assets/img/failure.png" v-if="loser=='red' "   alt="">
                   <div class="score" style="color:#FFFFFF;">{{secondScore}}分</div>
                </div>
            </div>
            <div class="tips-container" v-if="peopleNum == '3'">
                <div class="error-tips align-center" style="left:0" :class="[ peopleNum == '3' ? 'three_errorTips':'']" v-if="blueSubmited">
                    <!-- <img src="../../assets/img/right-img.png" v-if="firstAnswer[firstCurrentQuestion]===firstQuestion.answer" alt=""> -->
                    <img src="../../assets/img/error-img.png" alt="">
                    <v-touch>
                        <el-button style="width:100px;margin-top:20px" type="primary" :disabled="errorBlueTips!=='关闭'" @click="next('blue',false)">{{errorBlueTips}}</el-button>
                    </v-touch>
                </div>
                <div class="error-tips align-center" style="right:0" :style="peopleNum == '3' ? 'right:33.34vw':''" :class="[ peopleNum == '3' ? 'three_errorTips':'']" v-if="redSubmited">
                    <!-- <img src="../../assets/img/right-img.png" v-if="secondAnswer[secondCurrentQuestion]===secondQuestion.answer" alt=""> -->
                    <img src="../../assets/img/error-img.png" alt="">
                    <v-touch>
                        <el-button style="width:100px;margin-top:20px" class="submit pointer flex-center" type="primary" :disabled="errorRedTips!=='关闭'" @click="next('red',false)">{{errorRedTips}}
                        </el-button>
                    </v-touch>
                </div>
                <div class="error-tips align-center" style="right:0" :class="[ peopleNum == '3' ? 'three_errorTips':'']" v-if="yellowSubmited && peopleNum == '3'">
                    <!-- <img src="../../assets/img/right-img.png" v-if="secondAnswer[secondCurrentQuestion]===secondQuestion.answer" alt=""> -->
                    <img src="../../assets/img/error-img.png" alt="">
                    <v-touch>
                        <el-button style="width:100px;margin-top:20px" class="submit pointer flex-center" type="primary" :disabled="errorYellowTips!=='关闭'" @click="next('yellow',false)">{{errorYellowTips}}
                        </el-button>
                    </v-touch>
                </div>

                <div style="left:0" class="failed-res align-center"  :class="[ peopleNum == '3' ? 'failed_three':'']" v-if="blueOver">
                     <img  src="../../assets/img/quiz/winner.png"  v-if="winner==='blue' " alt="">
                     <img  src="../../assets/img/quiz/loser.png"   v-if="loserList[0] =='blue' || loserList[1] =='blue' " alt="">
                     <div  class="score" style="color:#FFFFFF;">{{firstScore}}分</div>
                </div>
                <div class="close-winner pointer" style="-webkit-app-region: no-drag;" @click="resetWinner" v-if="loserList.length == 2 ">
                    <i class="el-icon-close"></i>
                </div>
                <div style="right:0" class="failed-res align-center" :class="[ peopleNum == '3' ? 'failed_three red_failed':'']" v-if="redOver ">
                    <img src="../../assets/img/quiz/winner.png" v-if="winner==='red' " alt="">
                    <img src="../../assets/img/quiz/loser.png"  v-if="loserList[0] =='red' || loserList[1] =='red' "   alt="">
                    <div class="score" style="color:#FFFFFF;">{{secondScore}}分</div>
                </div>
                <div style="right:0" class="failed-res align-center" :class="[ peopleNum == '3' ? 'failed_three':'']" v-if="yellowOver">
                    <img src="../../assets/img/quiz/winner.png" v-if="winner==='yellow' " alt="">
                    <img src="../../assets/img/quiz/loser.png"  v-if="loserList[0] =='yellow' || loserList[1] =='yellow' " alt="">
                    <div class="score" style="color:#FFFFFF;">{{thirdScore}}分</div>
                </div>
            </div>
            <div :class="['quize-tool']" style="-webkit-app-region: no-drag;" ref="quizeTool">
                <div class="quize-tool-container align-center">
                    <el-tooltip class="item" effect="light" content="返回" :placement="toolDirction==='right'?'left':'right'">
                        <img src="../../assets/img/championshipBack.png" alt="" @click="championship">
                    </el-tooltip>
                    <div class="quize-tool-space"></div>
                    <el-tooltip class="item" effect="light" content="关闭" :placement="toolDirction==='right'?'left':'right'">
                        <img src="../../assets/img/quize-close.png" alt="" @click="$electron.ipcRenderer.send('close-resource-window',{metaId:id})">
                    </el-tooltip>
                </div>
            </div>
        </div>
        <div class="before-start flex-center" :class="{'hidden-bs-mask':hiddenBsTiemOut}">
            <span class="bs-tips">{{tips}}</span>
        </div>
    </div>
</template>

<script>
// import homeContainer from '../../components/background'
import TimeOutProgress from '../../components/timeOutProgress.vue'

let bsTimeIntal = null // 倒计时
const errorTips = ['2s', '1s', '关闭']
let errorIndexB = 0
let errorIndexR = 0
let errorIndexY = 0

export default {
    name: "championship",
    components: { TimeOutProgress },
    data () {
        return {
            id: '',
            firstQuestionArry: [],
            secondQuestionArry: [],
            thirdQuestionArry: [],
            blueSubmited: false,
            redSubmited: false,
            yellowSubmited:false,
            firstAnswer: [],
            secondAnswer: [],
            thirdAnswer: [],
            firstCurrentQuestion: 0,
            secondCurrentQuestion: 0,
            thirdCurrentQuestion: 0,
            options: ['A', 'B', 'C', 'D'],
            winner: '',
            loser: '',
            toolDirction: 'right',
            bsr: null,
            currentBlueTime: null,
            currentRedTime: null,
            currentYellowTime: null,
            bsTips: ['准备开始',  '3', '2', '1', '开始！'],//开始前提示语
            tipsIndex: 0,//倒计时下标
            hiddenBsTiemOut: false,
            firstScore: 0,//blue
            secondScore: 0,//red
            thirdScore: 0,//yellow
            errorBlueTips: '',
            errorRedTips: '',
            errorYellowTips: '',
            peopleNum:'',
            loserList:[],
            blueOver:false,
            redOver:false,
            yellowOver:false,

        }
    },
    created () {
        this.id = this.$route.params.id
        this.secondQuestionArry = this.$route.params.questionArry
        this.firstQuestionArry = [...this.secondQuestionArry]
        this.peopleNum = this.$route.params.peopleNum
        if (this.peopleNum == '3') {
            this.thirdQuestionArry = [...this.secondQuestionArry]
        }
        console.log(this.firstQuestionArry);
        //测试代码
        // let question = JSON.parse(localStorage.question)
        // this.id = question.id
        // this.secondQuestionArry = question.questionArry
        // this.firstQuestionArry = [...this.secondQuestionArry]
        
    },
    computed: {
        allSubmited () {
            return this.blueSubmited && this.redSubmited 
        },
        firstQuestion () {
            return this.firstQuestionArry[this.firstCurrentQuestion]
        },
        secondQuestion () {
            return this.secondQuestionArry[this.secondCurrentQuestion]
        },
        thirdQuestion () {
            return this.thirdQuestionArry[this.thirdCurrentQuestion]
        },
        widthtPre () {
            return 100 / this.firstQuestionArry.length
        },
        shoWinner () {
            if (!this.winner && !this.loser) {
                return {
                    winner: '',
                    loser: ''
                }
            } else if (this.winner && !this.loser) {
                return {
                    winner: this.winner,
                    loser: ''
                }
            } else if (this.winner && this.loser) {
                return {
                    winner: this.winner,
                    loser: this.loser
                }
            }
        },
        tips () {
            return this.bsTips[this.tipsIndex]
        }
    },
    watch:{
        errorRedTips(val){
            console.log(val);
        },
        winner(){
            console.log('this.winner', this.winner );
        },
    },
    mounted () {
        this.initPage()
    },
    methods: {
        initPage () {
            this.resetHeight(this.firstQuestion, 'Blue')
            this.resetHeight(this.secondQuestion, 'Red')
            if (this.peopleNum == '3') {
                this.resetHeight(this.thirdQuestion, 'Yellow')
            }
            this.startBsTimeintal()
        },
        submit (team) {
            switch (team) {
                case 'blue':
                    if (this.blueSubmited) return
                    if (this.firstCurrentQuestion === this.firstQuestionArry.length - 1) {
                        if (this.checkAnswerIsRight('blue')) {
                            this.$refs.blueTimeOut.stopTimeOut()
                            if (this.peopleNum == '3') {
                                if (this.winner) {
                                    this.loserList.push('blue')
                                }else {
                                    this.winner = 'blue'
                                }
                            }else{
                                this.winner ? this.loser = 'blue' : this.winner = 'blue'
                            }
                            this.blueOver = true
                            this.blueSubmited = false
                        } else {
                            this.errorBlueTips = errorTips[errorIndexB]
                            let errInval = setInterval(() => {
                                errorIndexB++
                                this.errorBlueTips = errorTips[errorIndexB]
                                if (errorIndexB >= errorTips.length - 1) {
                                    clearInterval(errInval)
                                }
                            }, 1000)
                            this.blueSubmited = true
                            this.currentBlueTime = new Date()
                        }
                    } else {
                        this.blueSubmited = true
                        if (this.checkAnswerIsRight('blue')) {
                            this.$refs.blueTimeOut.restartTimeout()
                            this.next('blue', true)
                        } else {
                            if (this.$refs.blueTimeOut.selfSeconds <=3) {
                                this.errorBlueTips = '关闭'
                            }else{
                                this.errorBlueTips = errorTips[errorIndexB]
                                let errInval = setInterval(() => {
                                    errorIndexB++
                                    this.errorBlueTips = errorTips[errorIndexB]
                                    if (errorIndexB >= errorTips.length - 1) {
                                        clearInterval(errInval)
                                    }
                                }, 1000)
                            } 
                        }
                        this.currentBlueTime = new Date()
                    }
                    break
                case 'red':
                    if (this.redSubmited) return
                    // 最后一题
                    if (this.secondCurrentQuestion === this.secondQuestionArry.length - 1) {
                        if (this.checkAnswerIsRight('red')) {
                            this.$refs.redTimeOut.stopTimeOut()
                            if (this.peopleNum == '3') {
                                if (this.winner) {
                                    this.loserList.push('red')
                                }else {
                                    this.winner = 'red'
                                }
                            }else{
                                this.winner ? this.loser = 'red' : this.winner = 'red'
                            }
                            this.redOver = true
                            this.redSubmited = false
                        } else {
                            this.errorRedTips = errorTips[errorIndexR]
                            let errInval = setInterval(() => {
                                errorIndexR++
                                this.errorRedTips = errorTips[errorIndexR]
                                if (errorIndexR >= errorTips.length - 1) {
                                    clearInterval(errInval)
                                }
                            }, 1000)
                            this.redSubmited = true
                            this.currentBlueTime = new Date()
                        }
                    } else {
                        this.redSubmited = true
                        if (this.checkAnswerIsRight('red')) {
                            this.$refs.redTimeOut.restartTimeout()
                            this.next('red', true)
                        } else {
                            if (this.$refs.redTimeOut.selfSeconds <=3) {
                                this.errorRedTips = '关闭'
                                console.log('倒计时三秒');
                            }else{
                                this.errorRedTips = errorTips[errorIndexR]
                                let errInval = setInterval(() => {
                                    errorIndexR++
                                    this.errorRedTips = errorTips[errorIndexR]
                                    if (errorIndexR >= errorTips.length - 1) {
                                        clearInterval(errInval)
                                    }
                                }, 1000)
                            }
                        }
                        this.currentRedTime = new Date()
                    }
                    break
                case 'yellow':
                    if (this.yellowSubmited) return
                    if (this.thirdCurrentQuestion === this.thirdQuestionArry.length - 1) {
                        if (this.checkAnswerIsRight('yellow')) {
                            this.$refs.yellowTimeOut.stopTimeOut()
                            if (this.peopleNum == '3'){
                                if (this.winner) {
                                    this.loserList.push('yellow')
                                }else {
                                    this.winner = 'yellow'
                                }
                            }
                            this.yellowSubmited = false
                            this.yellowOver = true
                        } else {
                            this.errorYellowTips = errorTips[errorIndexY]
                            let errInval = setInterval(() => {
                                errorIndexY++
                                this.errorYellowTips = errorTips[errorIndexY]
                                if (errorIndexY >= errorTips.length - 1) {
                                    clearInterval(errInval)
                                }
                            }, 1000)
                            this.yellowSubmited = false
                            this.currentYellowTime = new Date()
                        }
                    } else {
                        this.yellowSubmited = true
                        if (this.checkAnswerIsRight('yellow')) {
                            this.$refs.yellowTimeOut.restartTimeout()
                            this.next('yellow', true)
                        } else {
                            if (this.$refs.yellowTimeOut.selfSeconds <=3) {
                                this.errorYellowTips = '关闭'
                            }else{
                                this.errorYellowTips = errorTips[errorIndexY]
                                let errInval = setInterval(() => {
                                    errorIndexY++
                                    this.errorYellowTips = errorTips[errorIndexY]
                                    if (errorIndexY >= errorTips.length - 1) {
                                        clearInterval(errInval)
                                    }
                                }, 1000)
                            } 
                        }
                        this.currentBlueTime = new Date()
                    }
                    break
                default:
                    console.log('submit is failed')
            }
            return false
        },
        next (team, isRight) {
            switch (team) {
                case 'blue':
                    if (new Date() - this.currentBlueTime < 150) return
                    if (isRight) {
                        if (this.firstCurrentQuestion === this.firstQuestionArry.length - 1) {
                            this.blueSubmited = false
                            if (this.peopleNum !== '3') {
                                if (this.winner === 'red') {
                                    this.loser = 'blue'
                                } else {
                                    this.winner = 'blue'
                                }
                            }
                        } else {
                            this.firstCurrentQuestion++
                            this.$nextTick(() => {
                                if (this.firstQuestion.answerType === 'TEXT') {
                                    this.resetHeight(this.secondQuestion, 'Blue')
                                }
                            })
                        }
                    }
                    this.blueSubmited = false
                    this.errorBlueTips = ''
                    errorIndexB = 0
                    break
                case 'red':
                    if (new Date() - this.currentRedTime < 150) return
                    if (isRight) {
                        if (this.secondCurrentQuestion === this.secondQuestionArry.length - 1) {
                            this.redSubmited = false
                            if (this.peopleNum !== '3') {
                                if (this.winner === 'blue') {
                                    this.loser = 'red'
                                } else {
                                    this.winner = 'red'
                                }
                            }
                        } else {
                            this.secondCurrentQuestion++
                            this.$nextTick(() => {
                                if (this.secondQuestion.answerType === 'TEXT') {
                                    this.resetHeight(this.secondQuestion, 'Red')
                                }
                            })
                        }
                    }
                    this.errorRedTips = ''
                    errorIndexR = 0
                    this.redSubmited = false
                    break
                case 'yellow':
                    if (new Date() - this.currentYellowTime < 150) return
                    if (isRight) {
                        if (this.thirdCurrentQuestion === this.thirdQuestionArry.length - 1) {
                            this.yellowSubmited = false
                        } else {
                            this.thirdCurrentQuestion++
                            this.$nextTick(() => {
                                if (this.thirdQuestion.answerType === 'TEXT') {
                                    this.resetHeight(this.thirdQuestion, 'Yellow')
                                }
                            })
                        }
                    }
                    this.errorYellowTips = ''
                    errorIndexY = 0
                    this.yellowSubmited = false
                    break
                default:
                    console.log('next is failed')
            }
            return false
        },
        //check for true or false answers
        checkAnswerIsRight (type) {
            if (type === 'blue') {
                return this.firstAnswer[this.firstCurrentQuestion] === this.firstQuestion.answer
            }
            if (type === 'red') {
                return this.secondAnswer[this.secondCurrentQuestion] === this.secondQuestion.answer
            }
            if (type === 'yellow') {
                return this.thirdAnswer[this.thirdCurrentQuestion] === this.thirdQuestion.answer
            }
        },
        resetWinner () {
            this.winner = ''
            this.loser = ''
            this.firstCurrentQuestion = 0
            this.secondCurrentQuestion = 0
            this.thirdCurrentQuestion = 0
            this.firstAnswer = []
            this.secondAnswer = []
            this.thirdAnswer = []
            this.firstScore = 0
            this.secondScore = 0
            this.thirdScore = 0
            this.loserList = []
            this.blueOver = false
            this.redOver = false
            this.yellowOver = false
            this.$router.push({ name: 'Quiz' })
            // this.$refs.blueTimeOut.initTimeout()
            // this.$refs.redTimeOut.initTimeout()
            // this.startBsTimeintal()
        },
        changeAnswer (current, index) {
            switch (current) {
                case 'firstQuestion':
                    this.$set(this.firstAnswer, this.firstCurrentQuestion, index)
                    break
                case 'secondQuestion':
                    this.$set(this.secondAnswer, this.secondCurrentQuestion, index)
                    break
                case 'thirdQuestion':
                    this.$set(this.thirdAnswer, this.thirdCurrentQuestion, index)
                    break
                default:
                    console.log('changeAnswer is error')
            }
        },
        changeCurrentQuestion (current, val) {
            switch (current) {
                case 'blue':
                    if (this.firstCurrentQuestion + val < 0 || this.firstCurrentQuestion + val >= this.firstQuestionArry.length) return
                    this.firstCurrentQuestion += val
                    this.resetHeight(this.firstQuestion, 'Blue')
                    break
                case 'red':
                    if (this.secondCurrentQuestion + val < 0 || this.secondCurrentQuestion + val >= this.secondQuestionArry.length) return
                    this.secondCurrentQuestion += val
                    this.resetHeight(this.secondQuestion, 'Red')
                    break
                case 'yellow':
                    if (this.thirdCurrentQuestion + val < 0 || this.thirdCurrentQuestion + val >= this.thirdQuestionArry.length) return
                    this.thirdCurrentQuestion += val
                    this.resetHeight(this.thirdQuestion, 'Yellow')
                    break
                default:
                    console.log('changeCurrentQuestion is error')

            }
        },
        resetHeight (question, type) {
            console.log('reset', type)
            if (question.quiz_type !== 0 || question.answerType !== 'TEXT') return
            this.$refs[`wordSpace${type}`].forEach(dom => {
                dom && dom.$el && (dom.$el.style.height = '')
            })
            this.$nextTick(() => {
                let height = 0
                let newDomArryTop = [this.$refs[`wordSpace${type}`][0], this.$refs[`wordSpace${type}`][1],this.$refs[`wordSpace${type}`][2]]
                newDomArryTop.map((topDom, index) => {
                    const dom = topDom && topDom.$el
                    if (index === 0) {
                        height = dom.getBoundingClientRect().height
                    } else {
                        let newHeight = dom.getBoundingClientRect().height
                        console.log('newHeight=>>>', newHeight)
                        if (height - newHeight > 0) {
                            dom.style.height = height + 'px'
                        } else {
                            const rootEl = newDomArryTop[index - 1] && newDomArryTop[index - 1].$el
                            rootEl.style.height = newHeight + 'px'
                        }
                    }
                    return
                })
                if (this.$refs[`wordSpace${type}`].length % 2 === 0 && this.$refs[`wordSpace${type}`].length > 2) {
                    let newDomArryBottom = [this.$refs[`wordSpace${type}`][2], this.$refs[`wordSpace${type}`][3]]
                    newDomArryBottom.map((bottomDom, index) => {
                        const dom = bottomDom && bottomDom.$el
                        if (index === 0) {
                            height = dom.getBoundingClientRect().height
                        } else {
                            let newHeight = dom.getBoundingClientRect().height
                            if (height - newHeight > 0) {
                                dom.style.height = height + 'px'
                            } else {
                                const rootEl = newDomArryBottom[index - 1] && newDomArryBottom[index - 1].$el
                                rootEl.style.height = newHeight + 'px'
                            }
                        }
                        return
                    })
                }

            })
        },
        championship () {
            this.$router.push({ name: 'Quiz' })
        },
        changeToolPosition () {
            this.$refs.quizeTool.style.animation = 'position 1s ease forwards'
            this.$refs.quizeTool.addEventListener('animationend', function () {
                this.style.animation = ''
            })
            this.toolDirction === 'right' ? this.toolDirction = 'left' : this.toolDirction = 'right'
        },
        startBsTimeintal () {
            this.hiddenBsTiemOut = false
            bsTimeIntal && clearInterval(bsTimeIntal)
            bsTimeIntal = setInterval(() => {
                this.tipsIndex++
                if (this.tipsIndex >= this.bsTips.length) {
                    this.tipsIndex = 0
                    this.$refs.blueTimeOut.startTimeOut()
                    this.$refs.redTimeOut.startTimeOut()
                    if (this.peopleNum == '3' ) {
                        console.log('yellowTimeOut');
                        this.$refs.yellowTimeOut.startTimeOut()
                    }
                    this.hiddenBsTiemOut = true
                    bsTimeIntal && clearInterval(bsTimeIntal)
                    bsTimeIntal = null
                }
            }, 1000);
        },
        brforeBlueRestart (time) {
            //统计分数
            this.firstScore += time * 10
            console.log(time, 'blue')
        },
        brforeRedRestart (time) {
            this.secondScore += time * 10
            console.log(time, 'red')
        },
        brforeYellowRestart(time){
            this.thirdScore += time * 10
            console.log(time, 'yellow')
        },
        buleNextStep () {
            if (this.firstCurrentQuestion < this.firstQuestionArry.length - 1) {
                this.$refs.blueTimeOut.restartTimeout()
            }
            this.next('blue', true)
        },
        redNextStep () {
            if (this.secondCurrentQuestion < this.secondQuestionArry.length - 1) {
                this.$refs.redTimeOut.restartTimeout()
            }
            this.next('red', true)
        },
        yellowNextStep () {
            if (this.thirdCurrentQuestion < this.thirdQuestionArry.length - 1) {
                this.$refs.yellowTimeOut.restartTimeout()
            }
            this.next('yellow', true)
        }
    }
}
</script>

<style lang="scss">
#championship {
    height: 100vh;
    width: 100vw;
    background-image: url(../../assets/img/echarts_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    .title-wrap {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 64px;
        background-image: url("../../assets/img/title_bg.png");
        background-size: cover;
        -webkit-app-region: drag;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 30px;
        box-sizing: border-box;
        z-index: 98;
        .title-text {
          display: flex;
          align-items: center;
            img{
                margin-right: 8px;
                width: 20px;
                height: 20px;
            }
            span {
                font-size: 18px;
                color: #fff;
            }
        }
        .title-btns {
          -webkit-app-region: no-drag;
            img {
                width: 14px;
                height: 14px;
                margin-left: 18px;
                cursor: pointer;
            }
        }
    }
    .championContent{
        width: 100%;
        height: calc(100vh - 64px);
        overflow: hidden;
        position: relative;
        top: 64px;
        margin: 0 auto;
    }
    .threeMode{
        min-width: 92vw;
        .progress{
        }
        .progress-l,.progress-r{
            display: none;
        }
        .three_Title{
            width: 31vw;
            padding: 0 4vw;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }
    }
    .top-progress {
        min-width: 86vw;
        color: #fff;
        font-size: 1.125em;
        margin: 23px auto;
        .progress {
            width: 31vw;
            height: 1.8vw;
            // background: rgba(216, 233, 255, 1);
            // border: 2px solid rgba(255, 255, 255, 1);
        }
        .progress-l {
            border-radius: 12px 0px 0px 12px;
            margin-left: 5px;
            padding-right: 0;
            margin-right: -5px;
        }
        .progress-r {
            border-radius: 0px 12px 12px 0px;
            margin-right: 5px;
            padding-left: 0;
            margin-left: -5px;
        }
        .progress-img {
            height: 1.67vw;
            width: 100%;
            transition: width 0.5s ease;
        }
        .pk {
            width: 5.8vw;
            z-index:200;
        }
        .question-index {
            color: #717171;
            font-size: 22px;
            white-space: nowrap;
        }
    }
    .topic-container {
        // flex: 1;
    }
    .threeMode_content{
        width: 92vw!important;
    }
    .championship-content {
        width: 86vw;
        height: 64vh;
        margin: 0 auto;
        border-radius: 36px;
        .blue-content {
            flex: 1;
            height: 100%;
        }
        .red-content {
            flex: 1;
            height: 100%;
        }
        .yellow-content {
            flex: 1;
            height: 100%;
        }
        .topic {
            font-size: 1.75em;
            font-weight: 400;
            color: #303133;
            height: 10vw;
            margin-bottom: 5vh;
        }
        .answer-options {
            width: 100%;
            .img-answer {
                // transform: translateY(-2vh);
                position: relative;
                width: 7.8vw;
                height: 7.8vw;
                * {
                    cursor: pointer;
                }
                img {
                    width: 100%;
                    height: 100%;
                    border-radius:0.78vw;
                }
                &:not(:last-child) {
                    margin-right: 30px;
                }
                .answerText{
                    width:100%;
                    text-align:center;
                    white-space: nowrap;
                    margin-top:1.5vh;
                    color:#000000;
                    font-size: 24px;
                }
            }
            .current-answer {
                position: absolute;
                z-index: 99;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.6);
                border-radius:0.78vw;
                img {
                    width: 1.94vw;
                    height: 1.94vw;
                }
            }
            .text-container {
                width: 100%;
                flex-wrap: wrap;
                // white-space: nowrap;
            }
            .text-answer {
                width: 100%;
                background: rgba(255, 255, 255, 1);
                border: 1px solid rgba(221, 223, 231, 1);
                border-radius: 8px;
                font-size: 24px;
                color: #606266;
                margin-bottom: 2.33vh;
                text-align: left;
                min-height: 7.5vh;
                padding: 6px 25px;
                transform: translateY(-2vh);
                display: flex;
                // white-space: nowrap;
            }
            .answer-active {
                background: rgba(72, 148, 255, 1);
                color: #fff;
            }
            .judge {
                width: 100%;
                img{
                    cursor: pointer;
                    width:8.8vw;
                }
                &:first-child {
                    margin-right: 8vw;
                }
            }
        }
    }
    .student-handle {
        font-size: 0.875em;
        .handle-container {
            flex: 1;
        }
        // .handle {
        //     width: 18.06vw;
        //     height: 6vh;
        //     // background: rgba(0, 0, 0, 0.4);
        //     border-radius: 8px;
        //     color: #fff;
        // }
        .submit {
            width: 11.8vw;
            height: 5.4vh;
            line-height: 5.4vh;
            text-align: center;
            color: #fff;
            background: rgba(72, 148, 255, 1);
            border-radius: 42px;
            bottom: 4vw;
            position: absolute;
            font-size: 1.4vw;
        }
    }
    .tips-container {
        img {
            width: 38.47vw;
            height: 26.667vh;
        }
    }
    .right-tips {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 50vw;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 200;
    }
    .three_errorTips{
        width: 33.34vw!important;
    }
    .error-tips {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 50vw;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 200;
    }
    .failed_three{
        width: 33.34vw!important;
        img{
            width: 100%!important;;
        }
    }
    .red_failed{
        right: 33.34vw!important;
    }
    .failed-res {
        z-index: 200;
        position: fixed;
        top: 0;
        width: 50vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.4);
        img{
            width: 50vw;
            height: 100vh;
        }
        .score{
            font-size: 35px;
            position: absolute;
            bottom: 16vh;
        }
    }
    .close-winner {
        position: fixed;
        top: 15vh;
        right: 12vw;
        font-size: 30px;
        color: #fff;
        z-index: 300;
    }
    @keyframes position {
        from {
            opacity: 0;
            height: 0;
        }
        to {
            opacity: 1;
            height: 120px;
        }
    }
    .quize-tool-r {
        right: 25px;
    }
    .quize-tool-l {
        left: 25px;
    }

    .quize-tool {
        height: auto;
        width: 2.9vw;
        background-color: #888E99;
        position: absolute;
        border-radius: 6px;
        bottom: 1.5vh;
        right: 1vw;
        z-index: 100;
        // transition: all 1s ease;
        .quize-tool-container {
            height: 100%;
            padding: 0 8px;
            overflow: hidden;
            padding-top: 12px;
        }
        *:nth-child(n) {
            cursor: pointer;
        }

        img {
            // width: 1.6vw;
            // height: 1.6vw;
            // min-width: 24px;
            // min-height: 24px;
            width: 24px;
            height: 24px;
            margin-bottom: 16px;
        }
        // .quize-tool-space {
        //     width: 40px;
        //     height: 1px;
        //     background: rgba(44, 91, 138, 1);
        //     margin-bottom: 18px;
        // }
        // .tool-word {
        //     font-size: 14px;
        //     color: #dcdfe7;
        //     margin-bottom: 22px;
        // }
        .change-direction {
            position: absolute;
            top: 50%;
            width: 21px;
            height: 46px;
            transition: all 1s ease;
        }
        .change-direction-r {
            left: 1px;
            transform: translate(-100%, -50%);
        }
        .change-direction-l {
            right: 1px;
            transform: translate(100%, -50%) rotate(180deg);
        }
    }
    .before-start {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 9999;
        .bs-tips {
            color: #fff;
            font-size: 100px;
            font-weight: 900;
        }
    }
    .hidden-bs-mask {
        display: none;
    }
}

@media screen and (max-width: 1440px) {
    #championship {
        font-size: 12px !important;
        .submit{
            bottom: 3.6vw!important;
        }
    }
    .commitBtn{
        font-size:12px!important;
    }
    .text-answer{
        font-size:16px!important;
    }
    .text-container{
        transform: translateY(-8vh)!important;;
    }
}

</style>